<template>


  <div class="box">
    <div class="top">
       <div class="center">


                        <ModelTitle>
                          <template>
                            咨询管理
                          </template>
                        </ModelTitle>
  
                          <!-- 时间搜索框 -->
                          <div class="zhanwei">
                            <p class="riqi">发布日期</p>
                            <el-date-picker
                              v-model="value2"
                              type="daterange"
                              unlink-panels
                              range-separator="-"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :picker-options="pickerOptions">
                            </el-date-picker>

                            <!-- 搜索框 -->
                            <el-input style="width:200px;margin-left: 10px;"
                              placeholder="请输入内容"
                              v-model="input2"
                              clearable suffix-icon="ddg">
                            </el-input>

                             <!-- 搜索按钮 -->
                            <el-button style="margin-left:260px" type="primary" @click="sousuoname" icon="el-icon-search">搜索</el-button>
                            <!-- 新增按钮 -->
                            <el-button type="primary"    @click="dialogFormVisible = true">发布文章</el-button>
  

                  <!-- 表格 -->
                  <div>    
                <el-table 
                  :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                  border:none
                  stripe
                  style="width:1110px;margin-top:20px;">
                    <el-table-column
                      prop="id"
                      label="序号"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="img"
                      label="列表图"
                      width="180"
                      align="center">
                    <template slot-scope="scope">
                      <img :src="scope.row.img" alt="" style="width:100%">
                    </template>  
                    </el-table-column>

                    <el-table-column
                      prop="title"
                      label="文章标题"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="sort"
                      label="文章分类"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="people"
                      label="发布人"
                      align="center">
                    </el-table-column>

                    <el-table-column
                    :formatter="serviceStatus"
                      prop="state"
                      label="发布状态"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="collection"
                      label="收藏量"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="data"
                      label="操作时间"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      label="操作"
                      width="180"
                      align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                          <el-button
                          size="mini"
                          type="danger"
                          @click="delecthand(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                    
                </el-table> 

                </div>

                <div  style="width:530px;height:50px;margin-left: 300px;float: left;margin-top: 40px;">


                  <el-pagination
                          align="center"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[5, 10, 15, 20]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="list.length"
                        >
                        </el-pagination>

                    </div>
                    
                    </div>
  
                    <!-- 新增弹框 -->
                    <el-dialog title="新增文章" :visible.sync="dialogFormVisible">

                      <el-form-item label="文章信息">
                        </el-form-item>

                      <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="文章标题">
                          <el-input v-model="form.title" style="width:200px"></el-input>
                        </el-form-item>

                        <el-form-item label="图片">
                          <el-input v-model="form.img" style="width:200px"></el-input>
                        </el-form-item>


                        <el-form-item label="文章分类">
                          <el-select v-model="form.sort" placeholder="请选择文章类型">
                            <el-option label="健康头条" value="健康头条"></el-option>
                            <el-option label="慢病护理" value="慢病护理"></el-option>
                          </el-select>
                        </el-form-item>


                        <el-form-item label="文章内容">
                          <el-input type="textarea" v-model="form.textarea" style="width:500px;"></el-input>
                        </el-form-item>

                        <el-form-item label="发布状态">
                        <el-radio-group v-model="form.state">
                          <el-radio label="待发布"></el-radio>
                          <el-radio label="已发布"></el-radio>
                          <el-radio label="未发布"></el-radio>
                        </el-radio-group>
                      </el-form-item>

                        <el-form-item label="活动时间">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.data" style="width: 200px;"></el-date-picker>

                      </el-form-item>





                      <el-form-item label="排序号">
                          <el-input v-model="form.num" style="width:180px" ></el-input>
                        </el-form-item>



                        <el-form-item>
                          <el-button type="primary" @click="addUser">发布</el-button>
                          <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </el-form-item>
                      </el-form>
                  </el-dialog>


  

      </div>
    </div>
  </div>
  
  </template>
  
  <script>
  import axios from 'axios'
  import ModelTitle from '@/components/ModelTitle.vue';
  axios.defaults.baseURL="http://localhost:8080"



  export default {
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },


      //删除
      delecthand(row) {
      axios({
                url: "/user/delectConsu",
                method: "POST",
                params:{
                id:row.id
                }
            }).then((res) => {
                this.$message.success('删除成功')
                this.query();
            })
    },

        //新增
        addUser(){
            let data = moment(this.form.data).format('YYYY-MM-DD');
            this.form.data = data

            axios({
                url:"/user/addlunbtu",
                method:"post",
                params:{
                    data:this.form
                }
            }).then(res =>{
                this.$message({
                    message: '新增成功！！！',
                    type: 'success'
                });
            }).catch(res =>{
                this.$message({
                    message: '新增失败！！！',
                    type: 'error'
                });
            })
        },


    //判断状态颜色
    serviceStatus(row, column, cellValue, index) {
      console.log(cellValue);
      if (cellValue === 1) {
        return <font color="#FF0000">待发布</font>;
      } else if (cellValue === 2) {
        return <font color="#00FF00">已发布</font>;
      } else if (cellValue === 3) {
        return <font color="#0000FF">未发布</font>;
      }
    },


      //条查
      sousuoname(){
           axios({
            url: "/user/getListConsu",
            method: "GET",
            params:{
              title:this.input2
            }
        }).then((res) => {
            this.list = res.data; //把值传到list里面
            console.log(res);
        });
      },

      //咨询查询
      query() {
          axios({
              url: "/user/getListConsu",
              method: "GET",
          }).then((res) => {
              this.list = res.data; //把值传到list里面
              console.log(res.data);
          });
      },
    },
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: "120px",

            //新增
            form: {
              title: '',
              img: '',
              sort: '',
              people:'小明',
              textarea: '',
              data: '',
              num: '',
              collection:'999',
              
            },
            
            list:[],//主表数据

            currentPage: 1, // 当前页码
            pageSize: 10, // 每页的数据条数
            input: "",
            pickerOptions: {},
            input2: "", //条查
            value2: ""  //时间
        };
    },
    //查询
    created() {
        this.query();
    },
    components: { ModelTitle }
};
  
  
  </script>
  
  <style>
          *{
              margin: 0;
              padding: 0;
          }
          body{ 
              background: #F2F7FA;
          }
          .box{
              width: 1150px;
              height: 1112px;
              margin: 20px auto;
              background: rgb(192, 192, 192);
              position: relative;
          }
  
          .center{
              background-color: rgba(255, 255, 255, 1);
              width: 1150px;
              height: 1112px;
          }

  
          .zhanwei{
              width: 1150px;
              height: 40px;
  
              float: left;
              margin-top: 50px;
              
          }

          .riqi{
              color: lightgray;
              float: left;
              line-height: 40px;
              margin-left: 20px;
          }
  
  </style>
  